<div class="articles-nav-box swiper-container-horizontal swiper-container-free-mode">
<div class="swiper-wrapper">
        <li id="tab_category_0" class="swiper-slide">
            <a href="{:U('Articles/index/index')}" >
                <empty name="menu_list.first.title" value="">
                    {$brand.title}
                    <else/>
                    {$menu_list.first.title}
                </empty>
            	最新文章
            </a>
    	</li>
    <volist name="sub_menu.left" id="menu">
        <if condition="$menu['children']">
            <!--二级菜单-->
            <li id="tab_{$menu.tab}" class="dropdown {$class} nav-parent swiper-slide">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                    <neq name="menu.icon" value=""><i class="icon-{$menu.icon}"></i></neq>
                    {$menu.title} <i class="icon-chevron-right nav-parent-fold-icon"></i>
                </a>
                <ul class="dropdown-menu" role="menu">
                    <volist name="menu.children" id="child">
                        <li><a href="{$child.href}" class="{$child.class}">
                            <neq name="child.icon" value=""><i
                                    class="glyphicon glyphicon-{$child.icon}"></i></neq>
                            {$child.title}</a></li>
                    </volist>
                </ul>
            </li>
        <else/>
            <!--一级菜单-->
            <li id="tab_{$menu.tab}" class="{$menu.li_class} swiper-slide">
            	<a href="{$menu.href}" class="{$menu.a_class}">
                <neq name="menu.icon" value=""><i class="glyphicon glyphicon-{$menu.icon}"></i>
                </neq>
                {$menu.title}
                </a>
            </li>
        </if>
    </volist>
</div>
</div>
<script>
$(function(){   
      var navSwiper = new Swiper ('.articles-nav-box', {
        freeMode : true,
        slidesPerView : 'auto',
        freeModeSticky : true ,
    
      });

      $('.articles-nav-box #tab_category_{$category}').addClass('active');
})   
</script>